<script setup lang="ts">
import { Carousel as ACarousel } from "ant-design-vue";
interface Activity {
  time: string;
  name: string;
  organizer: string;
  cover: string;
  summary: string;
}

interface Category {
  name: string;
  activities: Activity[];
}

interface EventData {
  categories: Category[];
}

// 示例数据
const eventData: EventData = {
  categories: [
    {
      name: "志愿者活动",
      activities: [
        {
          time: "2025-01-31 09:00",
          name: "社区清洁活动",
          organizer: "社区服务组",
          cover: "volunteer_event_cover.jpg",
          summary: "加入我们，一起为社区环境做贡献！",
        },
        {
          time: "2025-02-15 14:00",
          name: "老年人陪伴活动",
          organizer: "社会关爱团队",
          cover: "elderly_care_event_cover.jpg",
          summary: "陪伴老年人，传递关爱与温暖！",
        },
      ],
    },
    {
      name: "技术分享",
      activities: [
        {
          time: "2025-02-05 10:00",
          name: "人工智能技术讲座",
          organizer: "技术部",
          cover: "ai_technology_event_cover.jpg",
          summary: "探讨人工智能技术的最新发展与应用！",
        },
        {
          time: "2025-02-20 15:00",
          name: "前端开发工作坊",
          organizer: "前端团队",
          cover: "frontend_workshop_event_cover.jpg",
          summary: "学习最新的前端开发技术与趋势！",
        },
      ],
    },
  ],
};
</script>

<template>
  <div class="activity">
    <a-carousel autoplay>
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
    </a-carousel>
    <div class="activity-main">
      <div>热门活动</div>
      <div>更多>></div>
    </div>
    <hr />
    <div class="activity-content">
      <div v-for="item in eventData.categories">
        <div class="content">这是一张图片</div>
        <div class="content-text">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* For demo */
:deep(.slick-slide) {
  text-align: center;
  height: 20 0px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}
:deep(.slick-slide h3) {
  color: #fff;
}
.activity {
  .activity-main {
    width: 100%;
    height: 60px;
    // line-height: 50px;
    box-sizing: border-box;
    padding: 30px 10px 20px 10px;
    display: flex;
    justify-content: space-between;
    > div:nth-child(2) {
      color: #364d79;
      font-size: 12px;
      box-sizing: border-box;
      padding: 5px 0 0 0;
    }
  }
  hr {
    width: calc(100% - 20px);
    margin: auto;
  }
  .activity-content {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    margin: 10px 0;
    border: solid black 1px;
    height: 250px;
    overflow: scroll;
    scrollbar-width: none; /* Firefox */
    display: flex;
    gap: 10px;
    .content {
      width: 100px;
      height: 120px;
      background-color: aqua;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content-text {
      text-align: center;
    }
  }
  .activity-content::-webkit-scrollbar {
    display: none;
  }
}
</style>
